[React Native] 基本を学ぶ – Propsでコンポーネントのパラメータを設定する

はじめに

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、React.jsを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。

この記事では、React Nativeの基本である Props について学びます。

Propsとは

React Nativeではアプリをコンポーネントという単位で構築・管理しますが、コンポーネントにはカスタマイズする目的で、パラメータを設定できます。このパラメータを Props と言います。React Nativeの標準として提供されるコンポーネントにもPropsは定義されているので、コンポーネントの使用時にカスタマイズできます。また自分でコンポーネントを作る際にも、Propsを定義することでカスタマイズ可能な状態にすることができます。

Propsを使う

Propsを使ってみましょう。なお、下記の記事で環境構築およびサンプルプロジェクトの作成は済んでいる前提で進めています。

【お試し10分】React Nativeことはじめ！サンプルアプリをサクッと動かす

Propsに値を設定する

まず App.js を、以下のように修正します。

import React from 'react';
import { StyleSheet, Image, View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          source={{ uri: 'https://mesoko.jp/wp-content/uploads/2018/07/mesoko_1807_1280x1024.png' }}
          style={{ width: 320, height: 256 }}
          />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Image という、画像表示用のコンポーネントを使っています。このうち source や style が、Propsです。それぞれオブジェクトを受け取るように定義されているので、オブジェクトを直接指定しています。

起動すると、めそ子が表示されます。

Propsを定義する

Propsを定義してみましょう。新しく Greeting.js ファイルを作り、そこに新しいコンポーネントを定義します。

import React, { Component } from 'react';
import { Text } from 'react-native';

export default class Greeting extends Component {
  render() {
    return (
      <Text>おハロー、{this.props.name}！</Text>
    );
  }
}

Greetingクラスでは name というPropsを定義しています。与えられた値を使ったテキストを表示しているだけです。

App.js を次のように書き換えます。

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Greeting from './Greeting';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Greeting name="スコール" />
        <Greeting name="セルフィ" />
        <Greeting name="ゼル" />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Greetingは3つ作っていますが、それぞれ name に与えている値が異なるため、異なるテキストが3行表示されます。

まとめ

コンポーネントを制御するために必要なPropsをご紹介しました。なお、Propsと切っては切れない関係であるStateという機能もあります。Stateについては、次のブログで取り上げたいと思います。

参考

本記事に執筆にあたり、次の記事を参考にしました。

• Props · React Native